<html>

<head>
<title>Parallel Coordinates</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="sylvester.js"></script>
<script type="text/javascript" src="glUtils.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript" src="ParallellCoordinates.js"></script>

<script type="text/javascript">
	Function.prototype.bind = function(scope) {
		var _function = this;

		return function() {
			return _function.apply(scope, arguments);
		}
	}

	google.load('visualization', '1');
	//google.setOnLoadCallback(start);

<!--	var url = "https://spreadsheets.google.com/tq?key=0AkG0DNVsDqEudE9NUG9wZnB0eXpwa2UxMUNwQi1aR0E&range=A1:C6&gid=0&headers=-1"-->
<!--	var cars = "https://spreadsheets.google.com/ccc?key=0Ah8aKdOzkIVEcFVSejJMd3JZWHA4NjBmTlBma2JIZXc&hl=en"-->


	function start() {
		pc = new ParCoord("d3canvas", "d2canvas");

	}

	function getData() {
		var input = document.getElementById("doclink");
		var url = input.value;
		var query = new google.visualization.Query(url);
		query.send(handleQueryResponse);
	}

	function handleQueryResponse(response) {

		var data = response.getDataTable();
		pc.setData(data);

	}

	function addBrush() {
		pc.addBrush();
		var brushDiv = $('#brushes');
		brushDiv.innerHtml = "<input type=\"radio\"></button>";
	}

	function removeBrush() {
		pc.removeBrush();
	}

</script>

<style type="text/css">
* {margin:0; padding:0;border:0;}
</style>


</head>

<body style="background-color: pink;" onload="start()">
<div style="height: 300px; width:100%; top:0;position:absolute; display:block; background-color:red">

<canvas id="d3canvas" style="border: 1px  solid black; position: absolute; top: 0; background-color:black; height:300px; width:100%;"></canvas>
<canvas id="d2canvas" style="border: 1px  solid black; position: absolute; top: 0; height:300px; width:100%;"></canvas>
	<!--<div id="brushes" style="position: absolute; top:20; left:630" >

	</div>-->
</div>
<p style="position:absolute;width:100%;top :300px">
Enter link to google document:
<input id="doclink" type="text" style="width: 650px"
	value="https://spreadsheets.google.com/ccc?key=0Ah8aKdOzkIVEcFVSejJMd3JZWHA4NjBmTlBma2JIZXc&hl=en" /><br />
<input type="button" value="Get data" onclick="getData()" />
<input type="button" value="Add brush" onclick="addBrush()" />
<input type="button" value="Remove brush" onclick="removeBrush()" /><br />
<span id="text" >Magnificent!</span>
</p>


</body>

</html>

